<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList 待办事项清单</title>
    <style>
        /* todoList 清单css样式文件 */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* body{
    background-color: rgb(196, 196, 196);
} */
        /* 头部导航块 */
        
        .head-map {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: 90px;
            background-color: rgb(87, 87, 87);
            border-bottom: 8px solid rgb(255, 255, 255)
        }
        
        .map-img {
            box-sizing: border-box;
            position: absolute;
            top: 15px;
            left: 40px;
            width: 47px;
            height: 47px;
        }
        
        .map-title {
            box-sizing: border-box;
            word-spacing: 3px;
            letter-spacing: 1px;
            width: 340px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            /* background-color: #fff; */
            margin-top: 15px;
            margin-left: 70px;
            font-size: 24px;
            font-weight: bold;
            color: rgb(255, 255, 255);
        }
        
        .text {
            position: absolute;
            right: 420px;
            top: 22px;
            box-sizing: border-box;
            width: 380px;
            height: 38px;
            outline: none;
            line-height: 40px;
            padding-left: 10px;
            border-radius: 12px;
            border: none;
            font-size: 18px;
            font-weight: bold;
            color: rgb(90, 90, 90);
        }
        
         ::placeholder {
            font-size: 18px;
            font-weight: 500;
            color: rgb(122, 122, 122);
        }
        
        .add-img {
            box-sizing: border-box;
            position: absolute;
            top: 16px;
            right: 355px;
            width: 50px;
            height: 50px;
            cursor: pointer;
        }
        
        .select-box {
            position: absolute;
            top: 22px;
            right: 50px;
            width: 160px;
            height: 40px;
            background-color: #fff;
        }
        
        .select-text {
            border: 1px solid rgb(63, 63, 63);
            text-align: center;
            padding-right: 10px;
            line-height: 40px;
            box-sizing: border-box;
            width: 160px;
            height: 40px;
            font-weight: bold;
            letter-spacing: 1.4px;
            text-shadow: 1.2px 1.2px 1.2px black;
            background-color: rgb(165, 165, 165);
            color: rgb(255, 255, 255);
            cursor: pointer;
        }
        
        .select-text:hover {
            text-shadow: 1.2px 1.2px 1.2px white;
            text-shadow: none;
            color: rgb(81, 81, 81);
            background-color: rgb(193, 193, 193);
        }
        
        .select {
            position: absolute;
            box-sizing: border-box;
            width: 160px;
            display: none;
            z-index: 10;
        }
        
        .select li {
            box-sizing: border-box;
            border-left: 1px solid black;
            border-right: 1px solid black;
            width: 160px;
            height: 40px;
            border-bottom: 1px solid black;
            background-color: #fff;
            list-style: none;
            text-align: center;
            line-height: 38px;
            cursor: pointer;
        }
        
        .select li:last-child {
            background-color: rgb(207, 207, 207);
        }
        
        .select li:last-child:hover {
            background-color: rgb(207, 207, 207);
        }
        
        .select li:hover {
            background-color: rgb(255, 229, 182);
        }
        /* 双伪元素解决塌陷 */
        
        .clearfix::before,
        .clearfix::after {
            content: ' ';
            display: table;
        }
        
        .clearfix::after {
            clear: both;
        }
        
        .value {
            position: relative;
            width: 100%;
            background-color: rgb(222, 219, 194);
            overflow: hidden;
            /*清除浮动影响*/
        }
        
        .tool-box {
            position: relative;
            float: left;
            width: 6.6%;
            height: 758.4px;
            background-color: rgb(87, 87, 87);
        }
        
        .op {
            position: absolute;
            width: 100%;
            height: 60px;
            background-color: rgb(87, 87, 87);
            border-bottom: 2px solid white;
            text-align: center;
            line-height: 60px;
            color: white;
            font-size: 16px;
            letter-spacing: 1.3px;
            cursor: pointer;
        }
        
        .right-box {
            float: left;
            width: 93.4%;
            height: 700px;
        }
        
        .notodo-box {
            position: relative;
            box-sizing: border-box;
            float: left;
            width: 50%;
            height: 700px;
            overflow: scroll;
        }
        
        .notodo-null {
            box-sizing: border-box;
            position: absolute;
            top: 180px;
            left: 200px;
            width: 260px;
            height: 320px;
            display: none;
        }
        
        .notodo-null-img {
            position: absolute;
            top: 50px;
            left: 60px;
            width: 135px;
            height: 135px;
        }
        
        .notodo-null-p {
            position: absolute;
            top: 180px;
            left: 36px;
            font-size: 30px;
            font-weight: bold;
            color: rgb(134, 134, 134);
        }
        
        .notodo-banner {
            position: fixed;
            top: 90px;
            left: 98px;
            background-color: rgb(0, 100, 123);
            width: 45%;
            height: 90px;
            border-radius: 30px;
            z-index: 11;
        }
        
        .notodo-img {
            position: absolute;
            bottom: 30px;
            left: 235px;
            width: 30px;
            height: 30px;
        }
        
        .notodo-p {
            letter-spacing: 2px;
            position: absolute;
            font-size: 26px;
            font-weight: bold;
            bottom: 30px;
            left: 270px;
            color: rgb(233, 233, 233);
        }
        
        .notodo-number {
            position: absolute;
            top: 23px;
            right: 28px;
            background-color: #fff;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 100%;
            font-size: 18px;
            color: rgb(73, 73, 73);
            font-weight: bold;
            background-color: rgb(246, 246, 246);
        }
        
        .hasdo-box {
            position: relative;
            box-sizing: border-box;
            float: left;
            width: 50%;
            height: 700px;
            overflow: scroll;
        }
        
        .hasdo-null {
            box-sizing: border-box;
            position: absolute;
            top: 180px;
            left: 200px;
            width: 260px;
            height: 320px;
            display: none;
        }
        
        .hasdo-null-img {
            position: absolute;
            top: 50px;
            left: 60px;
            width: 135px;
            height: 135px;
        }
        
        .hasdo-null-p {
            position: absolute;
            top: 180px;
            left: 36px;
            font-size: 30px;
            font-weight: bold;
            color: rgb(133, 133, 133);
        }
        
        .hasdo-banner {
            position: fixed;
            bottom: 76px;
            right: 21px;
            background-color: rgb(0, 94, 41);
            width: 45%;
            height: 90px;
            border-radius: 30px;
            z-index: 11;
        }
        
        .hasdo-img {
            position: absolute;
            top: 30px;
            left: 235px;
            width: 30px;
            height: 30px;
        }
        
        .hasdo-p {
            letter-spacing: 2px;
            position: absolute;
            font-size: 26px;
            font-weight: bold;
            top: 25px;
            left: 270px;
            color: rgb(232, 232, 232);
        }
        
        .hasdo-number {
            position: absolute;
            top: 23px;
            right: 28px;
            background-color: #fff;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 100%;
            font-size: 18px;
            color: rgb(73, 73, 73);
            font-weight: bold;
            background-color: rgb(246, 246, 246);
        }
        /*notodo  ul li */
        
        .notodo-ul {
            margin-top: 100px;
            box-sizing: border-box;
        }
        
        .notodo-ul li {
            overflow: hidden;
            position: relative;
            box-sizing: border-box;
            border-top-left-radius: none;
            border-bottom-left-radius: none;
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
            border-top: 1px solid grey;
            border-bottom: 1px solid grey;
            border-right: 1px solid grey;
            border-left: 10px solid rgb(0, 100, 123);
            ;
            list-style: none;
            margin-bottom: 12px;
            margin-left: 27px;
            width: 610px;
            background-color: #fff;
            /* border: 1px solid grey; */
        }
        
        .notodo-check {
            cursor: pointer;
            float: left;
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background-color: rgb(187, 187, 187);
        }
        
        .notodo-main {
            padding: 3px;
            margin-left: 50px;
            float: left;
            width: 475px;
            line-height: 40px;
            padding-left: 10px;
            padding-right: 10px;
            letter-spacing: 1px;
            word-break: break-all;
            background-color: rgb(239, 239, 239);
        }
        
        .right-btn {
            cursor: pointer;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            box-sizing: border-box;
            border: 1px solid rgb(72, 72, 72);
            border-radius: 100%;
            float: left;
            width: 26px;
            height: 26px;
            text-align: center;
            line-height: 20px;
            font-size: 20px;
            font-weight: bold;
            color: rgb(94, 94, 94);
            background-color: rgb(255, 210, 98);
        }
        
        .right-btn:hover {
            background-color: rgb(255, 244, 180);
        }
        /*hasdo  ul li */
        
        .hasdo-ul {
            position: absolute;
            bottom: 90px;
            box-sizing: border-box;
        }
        
        .hasdo-ul li {
            overflow: hidden;
            position: relative;
            box-sizing: border-box;
            border-top-left-radius: none;
            border-bottom-left-radius: none;
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
            border-top: 1px solid grey;
            border-bottom: 1px solid grey;
            border-right: 1px solid grey;
            border-left: 10px solid rgb(57, 80, 85);
            ;
            list-style: none;
            margin-bottom: 12px;
            margin-left: 27px;
            width: 610px;
            background-color: rgb(205, 205, 205);
            /* border: 1px solid grey; */
        }
        
        .hasdo-check {
            cursor: pointer;
            float: left;
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background-color: rgb(205, 205, 205);
        }
        
        .hasdo-main {
            padding: 3px;
            margin-left: 50px;
            float: left;
            width: 475px;
            line-height: 40px;
            padding-left: 10px;
            padding-right: 10px;
            letter-spacing: 1px;
            word-break: break-all;
            /* background-color: rgb(155, 155, 155); */
        }
        
        .right-btn {
            cursor: pointer;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            box-sizing: border-box;
            border: 1px solid rgb(72, 72, 72);
            border-radius: 100%;
            float: left;
            width: 26px;
            height: 26px;
            text-align: center;
            line-height: 20px;
            font-size: 20px;
            font-weight: bold;
            color: rgb(94, 94, 94);
            background-color: rgb(255, 210, 98);
        }
        
        .right-btn:hover {
            background-color: rgb(255, 244, 180);
        }
        /* 底部商标 */
        
        .tdlist-brand {
            box-sizing: border-box;
            float: left;
            background-color: rgb(87, 87, 87);
            width: 93.4%;
            height: 58.4px;
            border-left: 3px solid white;
            text-align: center;
            line-height: 58.4px;
        }
        
        .brand {
            font-size: 6px;
            color: white;
        }
        
        .yn-box {
            z-index: 100;
            position: absolute;
            top: 160px;
            left: 500px;
            box-sizing: border-box;
            width: 500px;
            height: 450px;
            background-color: rgb(233, 233, 233);
            border: 1px solid black;
            border-top: 30px solid rgb(105, 105, 105);
            display: none;
        }
        
        .yn-text {
            position: relative;
            box-sizing: border-box;
            width: 498px;
            height: 300px;
            background-color: rgb(233, 233, 233);
        }
        
        .yn-img {
            position: absolute;
            top: 85px;
            left: 180px;
            width: 135px;
            height: 135px;
        }
        
        .yn-p {
            position: absolute;
            top: 245px;
            left: 153px;
            font-size: 25px;
            font-weight: bold;
            color: rgb(98, 98, 98);
        }
        
        .no {
            position: absolute;
            bottom: 43px;
            left: 40px;
            width: 180px;
            height: 60px;
            background-color: #fff;
            border: none;
            background-color: rgb(209, 0, 0);
            color: white;
            font-size: 23px;
            font-weight: bold;
            text-align: center;
            line-height: 60px;
            border-radius: 12px;
        }
        
        .yes {
            position: absolute;
            bottom: 43px;
            right: 40px;
            width: 180px;
            height: 60px;
            background-color: #fff;
            border: none;
            background-color: rgb(0, 169, 34);
            color: white;
            font-size: 23px;
            font-weight: bold;
            text-align: center;
            line-height: 60px;
            border-radius: 12px;
        }
        
        .yes:hover {
            background-color: rgb(84, 215, 104);
            color: rgb(52, 52, 52);
        }
        
        .no:hover {
            background-color: rgb(213, 90, 90);
            color: rgb(42, 42, 42);
        }
        
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 50;
            background-color: rgba(0, 0, 0, 0.324);
            width: 100%;
            height: 849px;
            display: none;
        }
        
        a {
            bottom: 43px;
            right: 40px;
            width: 180px;
            height: 60px;
            background-color: #fff;
            border: none;
            background-color: rgb(0, 169, 34);
            color: white;
            font-size: 23px;
            font-weight: bold;
            text-align: center;
            line-height: 60px;
            border-radius: 12px;
        }
        
        .yes:hover {
            background-color: rgb(84, 215, 104);
            color: rgb(52, 52, 52);
        }
        
        .no:hover {
            background-color: rgb(213, 90, 90);
            color: rgb(42, 42, 42);
        }
        
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 50;
            background-color: rgba(0, 0, 0, 0.324);
            width: 100%;
            height: 849px;
            display: none;
        }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>

</head>

<body>
    <div class="head-map  clearfix">
        <img src="../images/banner1.jpg" alt="todoList-img-title" title="todoList 待办事项清单" class="map-img">
        <div class="map-title">todoList 待办事项清单</div>
        <input type="text" class="text" placeholder="在此输入你的待办事项">
        <img src="../images/banner1.png" alt="添加事项按钮" title="点击此处添加" class="add-img">
        <div class="select-box">
            <div class="select-text">▼ 切换主题</div>
            <ul class="select">
                <li class="pink">粉色系主题</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li class="ori">原色</li>
                <li>...敬请期待</li>
            </ul>
        </div>
    </div>
    <div class="value">
        <div class="tool-box">
            <div class="op">操作说明</div>
        </div>
        <div class="right-box">
            <div class="notodo-box">
                <div class="notodo-null">
                    <img src="../images/banner1.png" alt="" class="notodo-null-img">
                    <p class="notodo-null-p">无待完成事项</p>
                </div>
                <div class="notodo-banner">
                    <img src="../images/banner1.png" alt="" class="notodo-img">
                    <p class="notodo-p">未完成事项</p>
                    <div class="notodo-number">0</div>
                </div>
                <!-- 未完成事项ul -->
                <ul class="notodo-ul">

                </ul>
            </div>
            <div class="hasdo-box">
                <div class="hasdo-null">
                    <img src="../images/banner1.png" alt="" class="hasdo-null-img">
                    <p class="hasdo-null-p">无已完成事项</p>
                </div>
                <div class="hasdo-banner">
                    <img src="../images/banner1.png" alt="" class="hasdo-img">
                    <p class="hasdo-p">已完成事项</p>
                    <div class="hasdo-number">0</div>
                </div>
                <!-- 已完成事项ul -->
                <ul class="hasdo-ul">

                </ul>
            </div>
        </div>
        <div class="tdlist-brand">
            <div class="brand">todoList@MYT 卡卡西最近怎么样 V1.0.0版本 2022 5.21</div>
        </div>
    </div>

    <div class="yn-box">
        <div class="yn-text">
            <img src="../images/banner1.png" alt="" class="yn-img">
            <p class="yn-p">确认删除该事项？</p>
        </div>
        <button class="no">返&nbsp; 回</button>
        <button class="yes">确&nbsp; 认</button>
    </div>
    <div class="mask"></div>
    <div class="op-box">
        <div class="close">x</div>
        <img src="../images/banner1.png" alt="" class="op-p">
        <img src="../images/banner1.png" alt="" class="op-img">
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.addEventListener('selectstart', function(event) {
                event.preventDefault();
            })
            document.addEventListener('contextmenu', function(event) {
                event.preventDefault();
            })
        })
        $(function() {
            show();
            isnull();
            notodo_num();
            hasdo_num()
            $('.add-img').on('mouseover', function() {
                $(this).prop('src', './img/添加2.png')
            })
            $('.add-img').on('mouseout', function() {
                    $(this).prop('src', './img/添加1.png')
                })
                //   主题下拉
            var flag1 = true;
            $('.select-text').on('click', function() {
                    if (flag1 == true) {
                        $('.select').stop().slideDown(600)
                        $('.select-text').text('▲ 切换主题');
                        flag1 = false;
                    } else if (flag1 == false) {
                        $('.select').stop().slideUp(600)
                        $('.select-text').text('▼ 切换主题');
                        flag1 = true;
                    }
                })
                // ---------------------------主功能区---------------------------
                //数组对象形式存储数据
                //按回车处理数据
            $('.text').on('keydown', function(event) {
                    if (event.keyCode === 13) {
                        if ($('.text').val() != '') {
                            //得到原先存储的数据
                            var local = getData();
                            //更新本地存储数据
                            local.push({
                                title: $('.text').val(),
                                done: false
                            })
                            saveData(local);
                            show()
                            notodo_num();
                            hasdo_num()
                            isnull()
                            $('.text').val('')
                        } else {
                            alert('您需要输入内容才能添加！')
                        }
                    }
                })
                //按下添加建添加数据
            $('.add-img').on('click', function(event) {
                if ($('.text').val() != '') {
                    //得到原先存储的数据
                    var local = getData();
                    //更新本地存储数据
                    local.push({
                        title: $('.text').val(),
                        done: false
                    })
                    saveData(local);
                    show()
                    notodo_num();
                    hasdo_num()
                    isnull()
                    $('.text').val('')
                } else {
                    alert('您需要输入内容才能添加！')
                }
            })

            function getData() {
                var data = window.localStorage.getItem('todolist')
                if (data != null) {
                    data = JSON.parse(data);
                    return data;
                } else {
                    return [];
                }
            }

            function saveData(arr) {
                arr = JSON.stringify(arr);
                window.localStorage.setItem('todolist', arr);
            }
            //更新渲染函数 show data-load()
            function show() {
                var data = getData();
                $('.notodo-ul').empty();
                $('.hasdo-ul').empty();
                $.each(data, function(ndex, item) {
                    if (item.done == true) {
                        var li = $('<li><input type="checkbox" class="hasdo-check" checked="true"><div class="hasdo-main">' + item.title + '</div><div class="right-btn" id="' + index + '">-</div></li>')
                        $('.hasdo-ul').prepend(li)
                    } else if (item.done == false) {
                        var li = $('<li><input type="checkbox" class="notodo-check"><div class="notodo-main">' + item.title + '</div><div class="right-btn" id=" + index + ">-</div></li>')
                        $('.notodo-ul').prepend(li)
                    }
                })
            }
            //del-right
            $('.notodo-ul, .hasdo-ul').on('click', '.right-btn', function() {
                $('.yn-box').fadeIn(200)
                $('.mask').show()
                $('.yes').on('click', function() {
                    //修改数据
                    var data = getData();
                    var index = $(this).attr('id')
                    data.splice(index, 1)
                        //保存到本地存储数据
                    saveData(data)
                        //重渲染页面
                    show()
                    notodo_num()
                    hasdo_num()
                    isnull()
                    $('.yn-box').fadeOut(200)
                    $('.mask').hide()
                })
                $('.no').on('click', function() {
                    $('.yn-box').fadeOut(200)
                    $('.mask').hide()
                })
            })

            //完成未完成转换按钮
            $('.notodo-ul, .hasdo-ul').on('click', 'input', function() {
                //获取更改数据
                var data = getData()
                var index = $(this).siblings('.right-btn').attr('id')
                data[index].done = $(this).prop('checked')
                    //保存数据
                saveData(data)
                    //重新渲染页面
                show();
                notodo_num()
                hasdo_num()
                isnull();
            })

            function isnull() {
                if ($('.notodo-ul').children().length == 0) {
                    $('.notodo-null').fadeIn(500)
                } else if ($('.notodo-ul').children().length != 0) {
                    $('.notodo-null').fadeOut(200)
                }
                if ($('.hasdo-ul').children().length == 0) {
                    $('.hasdo-null').fadeIn(500)
                } else if ($('.hasdo-ul').children().length != 0) {
                    $('.hasdo-null').fadeOut(200)
                }
            }
            //待完成个数
            function notodo_num() {
                var notodonum = $('.notodo-ul').children().length
                $('.notodo-number').text(notodonum)
            }
            //完成个数
            function hasdo_num() {
                var hasdonum = $('.hasdo-ul').children().length
                $('.hasdo-number').text(hasdonum)
            }

            //改变主题
            //粉色系
            $('.pink').on('click', function() {
                    $('.head-map, .tool-box, .tdlist-brand, .op').css({
                        'backgroundColor': 'rgb(255, 117, 117)'
                    })
                    $('.select-text').css({
                        'backgroundColor': 'rgb(255, 165, 165)'
                    })
                    $('.value').css({
                        'backgroundColor': '#ffe2e2'
                    })
                    $('.notodo-banner').css({
                        'backgroundColor': '#b055e8'
                    })
                    $('.hasdo-banner').css({
                        'backgroundColor': '#b055e8'
                    })
                    $('.mask').css({
                        'backgroundColor': 'rgba(0, 0, 0, 0.324)'
                    })
                })
                //原色
            $('.ori').on('click', function() {
                $('.head-map, .tool-box, .tdlist-brand, .op').css({
                    'backgroundColor': 'rgb(87, 87, 87)'
                })
                $('.select-text').css({
                    'backgroundColor': 'rgb(165, 165, 165)'
                })
                $('.value').css({
                    'backgroundColor': 'rgb(222, 219, 194)'
                })
                $('.notodo-banner').css({
                    'backgroundColor': 'rgb(0, 100, 123)'
                })
                $('.hasdo-banner').css({
                    'backgroundColor': 'rgb(0, 94, 41)'
                })
                $('.mask').css({
                    'backgroundColor': 'rgba(0, 0, 0, 0.324)'
                })
            })

            //操作说明
            $('.op').on('click', function() {
                $('.op-box').stop().fadeIn(100)
                $('.mask').stop().show()
                $('.close').on('click', function() {
                    $('.op-box').stop().fadeOut(100)
                    $('.mask').stop().hide()
                })
            })
        })
    </script>
</body>

</html>